<template>
  <el-form ref="genInfoForm" :model="form" :rules="rules" label-width="150px">
    <el-row>
      <el-col :span="8">
        <el-form-item label="表名称" prop="tableName">
          <span>{{form.tableName}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="表描述" prop="tableComment">
          <el-input placeholder="请输入" v-model="form.tableComment" />
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="开发人员" prop="functionAuthor">
          <span>{{form.functionAuthor}}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item prop="codeModuleId">
          <span slot="label">
            代码模块<el-tooltip content="代码模块，例如: system" placement="top"><i class="el-icon-question"></i></el-tooltip>
          </span>
          <lam-dict-select v-model="form.codeModuleId" dictCode="codeModule" dictType="tableDict" :clearable="false" />
        </el-form-item>
      </el-col>
      <el-col :span="16">
        <el-form-item prop="packageName">
          <span slot="label">
            包全名<el-tooltip content="java代码所在的包名，例如 com.lam.system" placement="top"><i class="el-icon-question"></i></el-tooltip>
          </span>
          <el-input v-model="form.packageName" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="模块简写" prop="moduleShort">
          <span slot="label">
            模块简写<el-tooltip content="代码模块简写，可以和代码模块一样，例如 system=>sys、monitor=>monitor" placement="top"><i class="el-icon-question"></i></el-tooltip>
          </span>
          <el-input v-model="form.moduleShort" clearable placeholder="" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="UI组件位置" prop="uiPath">
          <span slot="label">
            UI组件位置<el-tooltip content="该代码模块的界面UI组件代码的位置，例如 system模块=>system/" placement="top"><i class="el-icon-question"></i></el-tooltip>
          </span>
          <el-input v-model="form.uiPath" type="textarea" autosize placeholder="" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="选择模板" prop="templateType">
          <lam-dict-select v-model="form.templateType" dictCode="template_type" style="width:100%;" :clearable="false"/>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="实体类名" prop="className">
          <el-input placeholder="请输入" v-model="form.className" />
        </el-form-item>
      </el-col>
      <el-col :span="14">
        <el-form-item label="实体类父类" prop="parentClassName">
          <el-input placeholder="请输入" v-model="form.parentClassName" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="2">
        <el-button type="info" @click="checkClass()">检查父类</el-button>
      </el-col>
    </el-row>
    
    <el-row>
      <el-col :span="8">
        <el-form-item prop="businessName">
          <span slot="label">
            业务名<el-tooltip content="业务名,英文标识符，例如: user，会出现在请求路径和权限编码中" placement="top"><i class="el-icon-question"></i></el-tooltip>
          </span>
          <el-input v-model="form.businessName" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="functionName">
          <span slot="label">
            功能名称<el-tooltip content="用于类描述和菜单名称，例如:用户管理" placement="top"><i class="el-icon-question"></i></el-tooltip>
          </span>
          <el-input v-model="form.functionName" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item>
          <span slot="label">
            上级菜单<el-tooltip content="分配到指定菜单下，例如:系统管理" placement="top"><i class="el-icon-question"></i></el-tooltip>
          </span>
          <treeselect :append-to-body="true" v-model="form.parentMenuId" :options="menus" :normalizer="normalizer"
            :show-count="true" placeholder="请选择系统菜单" />
        </el-form-item>
      </el-col>
    </el-row>
    
    <el-row>
      <el-col :span="16">
        <el-form-item label="生成功能项">
          <lam-dict-select type="checkbox" v-model="form.functionList" dictCode="code_gen_function" />
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item prop="genType">
          <span slot="label">
            生成代码方式<el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top"><i class="el-icon-question"></i></el-tooltip>
          </span>
          <lam-dict-select v-model="form.genType" dictCode="generate_type" type="radio" style="width:100%;" />
        </el-form-item>
      </el-col>
    </el-row>
    
    <el-row>
      <el-col :span="24" v-if="form.genType == '2'">
        <el-form-item prop="genPath">
          <span slot="label">
            自定义路径<el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top"><i class="el-icon-question"></i></el-tooltip>
          </span>
          <el-input v-model="form.genPath">
            <el-dropdown slot="append">
              <el-button type="primary">
                最近路径选择 <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="form.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    
    <el-row>
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :rows="2" v-model="form.remark"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 表记录唯一校验配置 -->
    <el-row v-if="hasUnique">
      <h4 class="form-header">唯一校验配置</h4>
      <el-col :span="8">
        <el-form-item prop="uniqueField">
          <span slot="label">
            唯一字段<el-tooltip content="唯一字段，如：code" placement="top"><i class="el-icon-question"></i></el-tooltip>
          </span>
          <lam-select v-model="form.uniqueField" :list="tableColumns" clearable>
            <span slot-scope="{item}" slot="option">{{item.value}} {{item.text}}</span>
          </lam-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="uniqueQueryField">
          <span slot="label">
            查询字段<el-tooltip content="查询字段，如：id" placement="top"><i class="el-icon-question"></i></el-tooltip>
          </span>
          <lam-select v-model="form.uniqueQueryField" :list="tableColumns" clearable>
            <span slot-scope="{item}" slot="option">{{item.value}} {{item.text}}</span>
          </lam-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="uniqueConditionField">
          <span slot="label">
            条件SQL字段<el-tooltip content="条件SQL字段" placement="top"><i class="el-icon-question"></i></el-tooltip>
          </span>
          <lam-select type="multipleSelect" v-model="form.uniqueConditionField" :list="tableColumns" clearable>
            <span slot-scope="{item}" slot="option">{{item.value}} {{item.text}}</span>
          </lam-select>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 树结构配置 -->
    <el-row v-if="form.templateType == 'simpleTree'">
      <h4 class="form-header">树结构配置</h4>
      <el-col :span="8">
        <el-form-item prop="treeCode">
          <span slot="label">
            节点id字段<el-tooltip content="树节点的id字段名，如：id" placement="top"><i class="el-icon-question"></i></el-tooltip>
          </span>
          <lam-select v-model="form.treeCode" :list="tableColumns" clearable>
            <span slot-scope="{item}" slot="option">{{item.value}} {{item.text}}</span>
          </lam-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="treeParentCode">
          <span slot="label">
            节点父id字段<el-tooltip content="树节点的父id字段名，如：parent_id" placement="top"><i class="el-icon-question"></i></el-tooltip>
          </span>
          <lam-select v-model="form.treeParentCode" :list="tableColumns" clearable>
            <span slot-scope="{item}" slot="option">{{item.value}} {{item.text}}</span>
          </lam-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="treeName">
          <span slot="label">
            节点名称字段<el-tooltip content="树节点的显示名称字段名，如：name" placement="top"><i class="el-icon-question"></i></el-tooltip>
          </span>
          <lam-select v-model="form.treeName" :list="tableColumns" clearable>
            <span slot-scope="{item}" slot="option">{{item.value}} {{item.text}}</span>
          </lam-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {httpPost, httpGet} from "@/api";

  export default {
    name: "BasicInfoForm",
    components: {
      Treeselect
    },
    props: {
      form: {
        type: Object,
        default: {}
      },
      menus: {
        type: Array,
        default: []
      },
    },
    data() {
      return {
        rules: {
          className: [{ required: true, message: "请输入实体类名", trigger: "blur" }],
          codeModuleId: [{ required: true, message: "请选择模块", trigger: "blur" }],
          packageName: [{ required: true, message: "请输入包路径", trigger: "blur" }],
          moduleShort: [{ required: true, message: "请输入模块简称", trigger: "blur" }],
          uiPath: [{ required: true, message: "请输入UI组件位置", trigger: "blur" }],
          templateType: [{ required: true, message: "请选择生成模板", trigger: "blur" }],
          businessName: [{ required: true, message: "请输入生成业务名", trigger: "blur" }],
          functionName: [{ required: true, message: "请输入生成功能名", trigger: "blur" }],

          uniqueField: [{ required: true, message: "选择唯一字段", trigger: "blur" }],
          uniqueQueryField: [{ required: true, message: "选择查询字段", trigger: "blur" }],

          treeCode: [{ required: true, message: "选择树编码字段", trigger: "blur" }],
          treeParentCode: [{ required: true, message: "选择树父编码字段", trigger: "blur" }],
          treeName: [{ required: true, message: "选择树名称字段", trigger: "blur" }],
        },
        url:{
          checkParentClass: '/tool/gen/checkClass',
          loadCodeModule: 'tool/codeModule/'
        },
        tableColumns:[]
      };
    },
    watch:{
      'form.codeModuleId': function(newVal){
        if(newVal){
          httpGet(this.url.loadCodeModule+newVal).then(res=>{
            this.form.packageName = res.data.packageName;
            this.form.moduleShort = res.data.moduleShort;
            this.form.uiPath = res.data.uiPath;
            this.$forceUpdate()
          })
        }
      },
      'form.id':function(newVal){
        this.$getDictItems('tableColumns:'+newVal, "tableDict").then(data => {
          this.tableColumns = data;
        });
      }
    },
    computed:{
      hasUnique(){
        return this.form && this.form.functionList && this.form.functionList.indexOf('unique')>-1;
      },
      tableColumnCode(){
        return 'tableColumns:'+this.form.id
      }
    },
    created() {
    },
    methods: {
      checkClass(){
        if(!this.form.parentClassName){
          this.msgError("请先输入父类！");
          return ;
        }
        httpPost(this.url.checkParentClass, {className: this.form.parentClassName}).then(res=>{
          if(res && res.success){
            this.msgSuccess("已检查，该类可以正常使用！");
          }else{
            this.msgError(res && res.msg ? res.msg :"父类不可用！");
          }
        }).catch(()=>{});
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.title,
          children: node.children
        };
      }
    }
  };
</script>
